<template>
  <a-form layout="horizontal" :form="form" class="form" style="width:99%;" >
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="路由ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'routerId',
              {rules: [{ required: false, message: '请输入路由ID', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="路由名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="需和前端定义的名称一致"
            :disabled="disabled"
            v-decorator="[
              'name',
              {rules: [{ required: true, message: '请输入路由名称', whitespace: true}]}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="菜单标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            :disabled="disabled"
            v-decorator="[
              'title',
              {rules: [{ required: true, message: '请输入菜单标题', whitespace: true}]}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="父ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'parentId',
              {rules: [{ required: false, message: '请输入父路由ID', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="父路由" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            placeholder=""
            v-decorator="[
              'parentTitle',
              {rules: [{ required: false, message: '请输入父路由', whitespace: true}]}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-tree-select
            :disabled="disabled"
            showSearch
            style="width: 100%"
            treeNodeFilterProp="value"
            showIcon
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            allowClear
            :treeData="iconSelectTreeData"
            @search="onSearchIconSelectTree"
            v-decorator="[
              'icon',
              {rules: [{ required: true, message: '请输入图标', whitespace: true}]}
            ]"
          >
            <span slot="title" slot-scope="{key, value}">
              <a-icon :type="key"/> {{ value }}
            </span>
          </a-tree-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            :disabled="disabled"
            v-decorator="[
              'component',
              {rules: [{ required: false, message: '请输入模板', whitespace: true}]}
            ]"
          >
            <a-select-option v-for="item in dictData.component" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="操作期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            :disabled="disabled"
            allowClear
            v-decorator="[
              'operating',
              {rules: [{ required: false, message: '请输入操作期', whitespace: true}]}
            ]"
          >
            <a-select-option v-for="item in dictData.operating" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="节点类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            :disabled="disabled"
            allowClear
            v-decorator="[
              'nodeType',
              {rules: [{ required: true, message: '请输入节点类型', whitespace: true}]}
            ]"
          >
            <a-select-option value="0">节点</a-select-option>
            <a-select-option value="1">叶子</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="重定向地址" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-input
            :disabled="disabled"
            v-decorator="[
              'redirect',
              {rules: [{ required: false, message: '请输入重定向地址', whitespace: true }]}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="外部链接地址" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-input
            :disabled="disabled"
            v-decorator="[
              'otherUrl',
              {rules: [{ required: false, message: '请输入外部链接地址', whitespace: true }]}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="6" :sm="12">
        <a-form-item label="是否隐藏" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['hidden', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="是否叶子" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch id="hh-test" checkedChildren="是" unCheckedChildren="否" v-decorator="['hideChildrenInMenu', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="是否缓存" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['keepAlive', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="隐藏页头" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['hiddenHeaderContent', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="6" :sm="12">
        <a-form-item label="面包屑" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['hiddenBreadcrumb', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="是否禁用" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['disabled', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="是否公共" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['publicFlag', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="记日志" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['logFlag', {valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="6" :sm="12">
        <a-form-item label="可回退" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['rollbackFlag', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="跨业务期回退" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['spanRollbackFlag', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="是否开启流程" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-switch checkedChildren="是" unCheckedChildren="否" v-decorator="['auditFlag', { valuePropName: 'checked'}]" />
        </a-form-item>
      </a-col>
     
      
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="参数1" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-input
            v-decorator="[
              'param1',
              {rules: [{ required: false, message: '参数1不能为空', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="参数1" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-input
            v-decorator="[
              'param2',
              {rules: [{ required: false, message: '参数2不能为空', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="参数3" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-input
            v-decorator="[
              'param3',
              {rules: [{ required: false, message: '参数3不能为空', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="参数4" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-input
            v-decorator="[
              'param4',
              {rules: [{ required: false, message: '参数4不能为空', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="摘要" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-textarea
            placeholder=""
            :rows="4"
            v-decorator="[
              'digest',
              {rules: [{ required: false, message: '请输入摘要', whitespace: true}]}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="备注" :labelCol="{sm: { span: 24 },md: { span: 3 }}" :wrapperCol="{sm: { span: 24 },md: { span: 21 }}">
          <a-textarea
            placeholder=""
            :rows="4"
            v-decorator="[
              'remarks',
              {rules: [{ required: false, message: '请输入备注', whitespace: true}]}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8" :style="{display:'none'}">
      <a-col :md="8" :sm="24">
        <a-form-item label="路由标识" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'key',
              {rules: [{ required: false, message: '请输入路由标识', whitespace: true}]}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="12">
        <a-form-item label="级别" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-input-number
            disabled
            style="width: 100%"
            v-decorator="[
              'rate',
              {rules: [{ type: 'number', required: false, message: '请输入级别', whitespace: true}]}
            ]"/>
        </a-form-item>
      </a-col>
       <a-col :md="6" :sm="12">
        <a-form-item label="排序" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
          <a-input-number
            disabled
            style="width: 100%"
            v-decorator="[
              'orderNo',
              {rules: [{ type: 'number', required: false, message: '请输入排序', whitespace: true}]}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { getBatchDict, getIconSelectTree } from "@/services/system/api"
import moment from 'moment'
export default {
  data () {
    return {
      hideChecked: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      confirmLoading: false,
      dictData: {},
      iconSelectTreeData: [],
      form: this.$form.createForm(this),
      initData: {},
      disabled: false
    }
  },
  created () {
    // 数据初始化
    const params = {}
    params.dictFields = 'component,operating'
    this.$http.post(getBatchDict,params).then(res => {
      this.dictData = res.result
    })
    // 下拉图标初始化
    const iconParams = {}
    this.$http.post(getIconSelectTree,iconParams).then(res => {
      this.iconSelectTreeData = res.result
    })
  },
  methods: {
    moment,
    setDisabled (value) {
      this.disabled = value
    },
    setInitDate (routerInfo) {
      this.form.resetFields()
      if (routerInfo) {
        delete routerInfo.opRouterId
        delete routerInfo.opOplogId
        delete routerInfo.opFuncId
        delete routerInfo.accessToken
        delete routerInfo.reqIp
        delete routerInfo.pageNum
        delete routerInfo.pageSize
        if (routerInfo.hidden === '1') {
          routerInfo.hidden = true
        } else {
          routerInfo.hidden = false
        }
        if (routerInfo.hideChildrenInMenu === '1') {
          routerInfo.hideChildrenInMenu = true
        } else {
          routerInfo.hideChildrenInMenu = false
        }
        if (routerInfo.keepAlive === '1') {
          routerInfo.keepAlive = true
        } else {
          routerInfo.keepAlive = false
        }
        if (routerInfo.hiddenHeaderContent === '1') {
          routerInfo.hiddenHeaderContent = true
        } else {
          routerInfo.hiddenHeaderContent = false
        }
        if (routerInfo.hiddenBreadcrumb === '1') {
          routerInfo.hiddenBreadcrumb = true
        } else {
          routerInfo.hiddenBreadcrumb = false
        }
        if (routerInfo.disabled === '1') {
          routerInfo.disabled = true
        } else {
          routerInfo.disabled = false
        }
        if (routerInfo.logFlag === '1') {
          routerInfo.logFlag = true
        } else {
          routerInfo.logFlag = false
        }
        if (routerInfo.rollbackFlag === '1') {
          routerInfo.rollbackFlag = true
        } else {
          routerInfo.rollbackFlag = false
        }
        if (routerInfo.publicFlag === '1') {
          routerInfo.publicFlag = true
        } else {
          routerInfo.publicFlag = false
        }
        if (routerInfo.auditFlag === '1') {
          routerInfo.auditFlag = true
        } else {
          routerInfo.auditFlag = false
        }
        if (routerInfo.spanRollbackFlag === '1') {
          routerInfo.spanRollbackFlag = true
        } else {
          routerInfo.spanRollbackFlag = false
        }
        this.form.setFieldsValue(routerInfo)
      }
    },
    onSearchIconSelectTree () {
      console.log(...arguments)
    }
  }
}
</script>
